/**
 * Created by SCR on 2017/8/2.
 */
/*jshint esversion: 6 */
var CanvasJS = require('./CanvasJS');

module.exports = (function () {
    __HeaderHeight = 40;
    __SubHeaderHeight = 40;

    __webixModelList = null;
    __webixDataList = null;

    __webixSelectedModelList = null;
    __webixSelectedDataMapList = null;
    __webixSelectedDataRefactorList = null;

    var __getTab1ServiceDetail = (mss, cb)=> {
        $('#global-loading-div').show();
        $.ajax({
            url:'/integration/network/getMSDetailList',
            type:'GET',
            dataType:'json',
            data:{
                msList:mss
            }
        })
            .done(function (res) {
                $('#global-loading-div').hide();
                return cb(null,res.MSListDetail);
            })
            .fail(function (err) {
                $('#global-loading-div').hide();
                __addNotice(__NoticeType.warning,'Get services detail information failed!<br><pre>'+JSON.stringify(err,null,4)+'</pre>');
                return cb(err);
            });
    };

    return {
        __buildTab12List: function (type, itemData, cb) {
            var self = this;

            if(type == 'model'){
                let accoItems = __webixModelList.getChildViews();
                for(let i=0;i<accoItems.length;i++){
                    accoItems[i].collapse();
                }

                let templateKey = '#value#';
                let __webixList = __webixModelList;
                let __webixSelectedList = __webixSelectedModelList;
                let serviceList = itemData.serviceList;
                let width = $$('div-model-list-accordion').config.width;
                let accordionItem = {
                    id:  itemData.host + ':' + itemData.port,
                    view: 'accordionitem',
                    header: itemData.host + ':' + itemData.port,
                    headerHeight: __HeaderHeight,
                    headerAltHeight: __HeaderHeight,
                    // width: width,
                    body:{
                        rows:[
                            {
                                id: itemData.host + '-' + itemData.port + '-filter',
                                view: 'text',
                                placeholder: 'Filter',
                                width: width
                            },
                            {
                                id: itemData.host + '-' + itemData.port + '-tree',
                                view: 'tree',
                                // width: width,
                                select: true,
                                multiselect: true,
                                // height: 400,
                                autoheight: true,
                                maxHeight: 400,
                                // autowidth: true,
                                // autoheight: true,
                                editable: false,
                                data: serviceList,
                                filterMode:{
                                    showSubItems:true,
                                    level:1
                                },
                                template: "{common.checkbox()}<span>"+templateKey+"</span>"
                            },
                            {
                                margin: 15,
                                cols:[
                                    {},
                                    {
                                        id: itemData.host + '-' + itemData.port + '-btn',
                                        view: 'button',
                                        value: 'Add',
                                        width: 80,
                                        inputWidth: 60
                                    }
                                ]
                            }
                        ]
                    }
                };

                __webixList.addView(accordionItem);

                let height = $($$(itemData.host + '-' + itemData.port + '-tree').$view).find('.webix_scroll_cont').height();
                if(height < 400){
                    $$(itemData.host + '-' + itemData.port + '-tree').define('height',height);
                    $$(itemData.host + '-' + itemData.port + '-tree').resize();
                }

                $$(itemData.host + '-' + itemData.port + '-filter').attachEvent('onTimedKeyPress',function () {
                    $$(itemData.host + '-' + itemData.port + '-tree').filter(templateKey,this.getValue());
                });
                let webixBtn = $$(itemData.host + '-' + itemData.port + '-btn');

                let webixTree = $$(itemData.host + '-' + itemData.port + '-tree');
                webixTree.attachEvent('onItemClick',function (id) {
                    var hasChecked = false;
                    var checked = this.getChecked();
                    for(var i=0;i<checked.length;i++){
                        if(checked[i] == id){
                            hasChecked = true;
                            break;
                        }
                    }
                    if(!hasChecked){
                        this.checkItem(id);
                    }
                    else{
                        this.uncheckItem(id);
                    }
                });
                webixTree.attachEvent('onItemCheck', function (id) {
                    if(this.getChecked().length == 0)
                        $(webixBtn.$view).attr('disabled',true);
                    else
                        $(webixBtn.$view).attr('disabled',false);
                });

                webixBtn.attachEvent('onItemClick',function () {
                    // $('#canvas').unbind();
                    // __webixSelectedList.clearAll();
                    // __webixSelectedList.refresh();
                    //
                    // var msList = [];
                    // var msIDList = webixTree.getChecked();
                    //
                    // for(var i=0;i<msIDList.length;i++){
                    //     var treeItem = webixTree.getItem(msIDList[i]);
                    //     msList.push({
                    //         _id: treeItem._id,
                    //         host: treeItem.host,
                    //         port: treeItem.port
                    //     });
                    // }
                    // if(msList.length == 0){
                    //     __addNotice(__NoticeType.warning,'Please select services to integrate!');
                    //     return ;
                    // }
                    //
                    // __getTab1ServiceDetail(msList,function (err, MSListDetail) {
                    //     for(let i=0;i<MSListDetail.length;i++){
                    //         if(MSListDetail[i].error){
                    //             __addNotice(__NoticeType.warning, 'Failed to get service detail!<br><pre>' + JSON.stringify(MSListDetail[i].error) + '</pre>');
                    //         }
                    //         else{
                    //             MSListDetail[i].MSDetail.serviceType = 'model';
                    //             __webixSelectedList.add(MSListDetail[i].MSDetail);
                    //         }
                    //     }
                    //
                    //     $('#webix-AggreMS-list .webix_list_item').attr('draggable',true);
                    //     var dnd = self.__Dnd();
                    //     dnd.init();
                    //
                    //     __addNotice(__NoticeType.notice,'Add to integration services list success!');
                    // });
                    self.__addDetailClick('model',webixTree);
                });
            }

            else if(type == 'data map'){
                let accoItems = __webixDataList.getChildViews();
                for(let i=0;i<accoItems.length;i++){
                    accoItems[i].collapse();
                }

                let templateKey = '#name#';
                let mapServiceList = itemData.serviceList.dataMapServices;
                // var refactorServiceList = itemData.serviceList.refactorServices;
                if(mapServiceList.error != null){
                    __addNotice(__NoticeType.warning, 'Fetch data map services failed!<br><pre>'+JSON.stringify(mapServiceList.error,null,4)+'</pre>');
                    return ;
                }

                // var mapAccordionItem = null;
                // var refactorAccordionItem = null;
                // var rows = [];
                // if(mapServiceList.error == null && mapServiceList.data.length != 0){
                //     mapAccordionItem = {
                //         // view: 'accordionitem',
                //         header: 'Data map services',
                //         headerHeight: __SubHeaderHeight,
                //         headerAltHeight: __SubHeaderHeight,
                //         body:{
                //             rows:[
                //                 {
                //                     id: itemData.host + '-' + itemData.port + '-data-map-filter',
                //                     view: 'text',
                //                     placeholder: 'Filter'
                //                 },
                //                 {
                //                     id: itemData.host + '-' + itemData.port + '-data-map-tree',
                //                     view: 'tree',
                //                     select: true,
                //                     multiselect: true,
                //                     height: 400,
                //                     autowidth: true,
                //                     autoheight: true,
                //                     editable: false,
                //                     data: mapServiceList.data,
                //                     filterMode:{
                //                         showSubItems:true,
                //                         level:1
                //                     },
                //                     template: "{common.icon()} {common.checkbox()} {common.folder()} <span>"+templateKey+"</span>"
                //                 },
                //                 {
                //                     id: itemData.host + '-' + itemData.port + '-data-map-btn',
                //                     view: 'button',
                //                     value: 'Add',
                //                     inputWidth: 60
                //                 }
                //             ]
                //         }
                //     };
                //     rows.push(mapAccordionItem);
                // }
                // if(refactorServiceList.error == null && refactorServiceList.data.length != 0){
                //     refactorAccordionItem = {
                //         // view: 'accordionitem',
                //         header: 'Data refactor services',
                //         headerHeight: __SubHeaderHeight,
                //         headerAltHeight: __SubHeaderHeight,
                //         body:{
                //             rows:[
                //                 {
                //                     id: itemData.host + '-' + itemData.port + '-data-refactor-filter',
                //                     view: 'text',
                //                     placeholder: 'Filter'
                //                 },
                //                 {
                //                     id: itemData.host + '-' + itemData.port + '-data-refactor-tree',
                //                     view: 'tree',
                //                     select: true,
                //                     multiselect: true,
                //                     height: 400,
                //                     autowidth: true,
                //                     autoheight: true,
                //                     editable: false,
                //                     data: refactorServiceList.data,
                //                     filterMode:{
                //                         showSubItems:true,
                //                         level:1
                //                     },
                //                     template: "{common.icon()} {common.checkbox()} {common.folder()} <span>"+templateKey+"</span>"
                //                 },
                //                 {
                //                     id: itemData.host + '-' + itemData.port + '-data-refactor-btn',
                //                     view: 'button',
                //                     value: 'Add',
                //                     inputWidth: 60
                //                 }
                //             ]
                //         }
                //     };
                //     rows.push(refactorAccordionItem);
                // }
                let accordionItem = {
                    id:  itemData.host + ':' + itemData.port,
                    view: 'accordionitem',
                    header: itemData.host + ':' + itemData.port,
                    headerHeight: __HeaderHeight,
                    headerAltHeight: __HeaderHeight,
                    adjust: true,
                    body:{
                        rows:[
                            {
                                id: itemData.host + '-' + itemData.port + '-data-map-filter',
                                view: 'text',
                                placeholder: 'Filter'
                            },
                            {
                                id: itemData.host + '-' + itemData.port + '-data-map-tree',
                                view: 'tree',
                                select: true,
                                type: {
                                    height: 'auto'
                                },
                                multiselect: true,
                                // height: 400,
                                maxHeight: 400,
                                autoheight: true,
                                editable: false,
                                data: mapServiceList.data,
                                filterMode:{
                                    showSubItems:true,
                                    level:1
                                },
                                template: " {common.checkbox()}<span>"+templateKey+"</span>"
                            },
                            {
                                cols:[
                                    {},
                                    {
                                        id: itemData.host + '-' + itemData.port + '-data-map-btn',
                                        view: 'button',
                                        value: 'Add',
                                        width: 80,
                                        inputWidth: 60
                                    }
                                ]
                            }
                        ]
                    }
                };
                __webixDataList.addView(accordionItem);

                let height = $($$(itemData.host + '-' + itemData.port + '-data-map-tree').$view).find('.webix_scroll_cont').height();
                if(height < 400){
                    $$(itemData.host + '-' + itemData.port + '-data-map-tree').define('height',height);
                    $$(itemData.host + '-' + itemData.port + '-data-map-tree').resize();
                }

                if(mapServiceList.error == null && mapServiceList.data.length != 0){
                    let webixBtn = $$(itemData.host + '-' + itemData.port + '-data-map-btn');
                    $$(itemData.host + '-' + itemData.port + '-data-map-filter').attachEvent('onTimedKeyPress',function () {
                        $$(itemData.host + '-' + itemData.port + '-data-map-tree').filter(templateKey,this.getValue());
                    });

                    let webixTree = $$(itemData.host + '-' + itemData.port + '-data-map-tree');
                    webixTree.attachEvent('onItemClick',function (id) {
                        var hasChecked = false;
                        var checked = this.getChecked();
                        for(var i=0;i<checked.length;i++){
                            if(checked[i] == id){
                                hasChecked = true;
                                break;
                            }
                        }
                        if(!hasChecked){
                            this.checkItem(id);
                        }
                        else{
                            this.uncheckItem(id);
                        }
                    });
                    webixTree.attachEvent('onItemCheck', function (id) {
                        if(this.getChecked().length == 0)
                            $(webixBtn.$view).find('button').attr('disabled',true);
                        else
                            $(webixBtn.$view).find('button').attr('disabled',false);
                    });

                    webixBtn.attachEvent('onItemClick',function () {
                        self.__addDetailClick('data map',webixTree, itemData.host, itemData.port);
                    });
                }
                // if(refactorServiceList.error == null && refactorServiceList.data.length != 0){
                //     let webixBtn = $$(itemData.host + '-' + itemData.port + '-data-refactor-btn');
                //     $$(itemData.host + '-' + itemData.port + '-data-refactor-filter').attachEvent('onTimedKeyPress',function () {
                //         $$(itemData.host + '-' + itemData.port + '-data-refactor-tree').filter(templateKey,this.getValue());
                //     });
                //
                //     let webixTree = $$(itemData.host + '-' + itemData.port + '-data-refactor-tree');
                //     webixTree.attachEvent('onItemClick',function (id) {
                //         var hasChecked = false;
                //         var checked = this.getChecked();
                //         for(var i=0;i<checked.length;i++){
                //             if(checked[i] == id){
                //                 hasChecked = true;
                //                 break;
                //             }
                //         }
                //         if(!hasChecked){
                //             this.checkItem(id);
                //         }
                //         else{
                //             this.uncheckItem(id);
                //         }
                //     });
                //     webixTree.attachEvent('onItemCheck', function (id) {
                //         if(this.getChecked().length == 0)
                //             $(webixBtn.$view).find('button').attr('disabled',true);
                //         else
                //             $(webixBtn.$view).find('button').attr('disabled',false);
                //     });
                //
                //     webixBtn.attachEvent('onItemClick',function () {
                //         $('#canvas').unbind();
                //         __webixSelectedDataRefactorList.clearAll();
                //         __webixSelectedDataRefactorList.refresh();
                //
                //         var msIDList = webixTree.getChecked();
                //         for(var i=0;i<msIDList.length;i++){
                //             var treeItem = webixTree.getItem(msIDList[i]);
                //             treeItem.serviceType = 'data refactor';
                //             __webixSelectedDataRefactorList.add(treeItem);
                //         }
                //         if(msIDList.length == 0){
                //             __addNotice(__NoticeType.warning,'Please select services to integrate!');
                //             return ;
                //         }
                //
                //         $($$('data-refactor-services-accordion-item').$view).find('.webix_list_item').attr('draggable',true);
                //         var dnd = self.__Dnd();
                //         dnd.init();
                //     });
                // }
            }

            // if($('#div-AggreMS').hasClass('myCollapsed')){
            //     $('#div-AggreMS').toggleClass('myCollapsed');
            //     $('#toggle-cart-sidebar-btn').find('i').toggleClass('fa-chevron-left fa-chevron-right');
            //     setCanvasPos();
            //     setSidebarBtn();
            // }
            if(cb){
                cb();
            }
        },

        __addDetailClick: function (serviceType, webixTree, host, port) {
            var self = this;

            $('#canvas').unbind();
            if(serviceType == 'model'){
                // __webixSelectedModelList.clearAll();

                var msList = [];
                var msIDList = webixTree.getChecked();
                for(let i=0;i<msIDList.length;i++){
                    var treeItem = webixTree.getItem(msIDList[i]);
                    msList.push({
                        _id: treeItem._id,
                        host: treeItem.host,
                        port: treeItem.port
                    });
                }
                if(msList.length == 0){
                    __addNotice(__NoticeType.warning,'Please select services to integrate!');
                    return ;
                }
                __getTab1ServiceDetail(msList,function (err, MSListDetail) {
                    for(let i=0;i<MSListDetail.length;i++){
                        if(MSListDetail[i].error){
                            __addNotice(__NoticeType.warning, 'Failed to get service detail!<br><pre>' + JSON.stringify(MSListDetail[i].error) + '</pre>');
                        }
                        else{
                            var hasInserted = false;
                            var itemID = __webixSelectedModelList.getFirstId();
                            while (itemID){
                                var item = __webixSelectedModelList.getItem(itemID);
                                if (item.MS._id == MSListDetail[i].MSDetail.MS._id){
                                    hasInserted = true;
                                    break;
                                }
                                itemID = __webixSelectedModelList.getNextId(itemID);
                            }
                            if(!hasInserted){
                                MSListDetail[i].MSDetail.serviceType = 'model';
                                __webixSelectedModelList.add(MSListDetail[i].MSDetail);
                            }
                        }
                    }
                    __webixSelectedModelList.refresh();
                    __webixSelectedDataMapList.refresh();
                    $('#webix-AggreMS-list .webix_list_item').attr('draggable',true);
                    var dnd = self.__Dnd();
                    dnd.init();
                    __addNotice(__NoticeType.notice,'Add to integration services list success!');
                });
            }
            else if(serviceType == 'data map'){
                var dsIDList = webixTree.getChecked();
                if(dsIDList.length == 0){
                    __addNotice(__NoticeType.warning,'Please select services to integrate!');
                    return ;
                }
                for(let i=0;i<dsIDList.length;i++){
                    let treeItem = webixTree.getItem(dsIDList[i]);
                    let hasInserted = false;
                    let itemID = __webixSelectedDataMapList.getFirstId();
                    while (itemID){
                        var item = __webixSelectedDataMapList.getItem(itemID);
                        if (item._id == treeItem._id){
                            hasInserted = true;
                            break;
                        }
                        itemID = __webixSelectedDataMapList.getNextId(itemID);
                    }
                    if(!hasInserted){
                        treeItem.serviceType = 'data map';
                        treeItem.host = host;
                        treeItem.port = port;
                        __webixSelectedDataMapList.add(treeItem);
                    }

                }
                __webixSelectedModelList.refresh();
                __webixSelectedDataMapList.refresh();
                $('#webix-AggreMS-list .webix_list_item').attr('draggable',true);
                var dnd = self.__Dnd();
                dnd.init();
                __addNotice(__NoticeType.notice,'Add to integration services list success!');
            }
            else if(serviceType == 'data refactor'){
                __webixSelectedDataRefactorList.clearAll();
                __webixSelectedDataRefactorList.refresh();
            }
        },

        __Dnd: function (){
            return {
                init: function () {
                    var self = this;
                    // 要不然会重复添加
                    $('#canvas').unbind();
                    self.src = $('.webix_list_item');
                    self.dst = $('#canvas');
                    $(self.src).on('dragstart', self.onDragStart);
                    $(self.dst).on('dragenter', self.onDragEnter);
                    $(self.dst).on('dragover', self.onDragOver);
                    $(self.dst).on('dragleave', self.onDragLeave);
                    $(self.dst).on('drop', self.onDrop);
                },
                onDragStart: function (e) {
                    console.log('in drag start');
                    function isParent (obj,parentObj){
                        while (obj != undefined && obj != null && obj.tagName.toUpperCase() != 'BODY'){
                            if (obj == parentObj){
                                return true;
                            }
                            obj = obj.parentNode;
                        }
                        return false;
                    }
                    var modelListView = __webixSelectedModelList.$view;
                    var dataMapListView = __webixSelectedDataMapList.$view;
                    // var dataRefactorListView = __webixSelectedDataRefactorList.$view;
                    var type = null;
                    if(isParent(e.target,modelListView)){
                        type = 'model';
                    }
                    else if(isParent(e.target,dataMapListView)){
                        type = 'data map';
                    }
                    // else if($(dataRefactorListView).find($(e.target))){
                    //     type = 'data refactor';
                    // }
                    var data = $(e.target).index() + '---' + type;
                    e.dataTransfer = e.originalEvent.dataTransfer;
                    e.dataTransfer.setData('text/plain', data);
                    return true;
                },
                onDragEnter: function (e) {
                    return true;
                },
                onDragLeave: function (e) {
                    return true;
                },
                onDragOver: function (e) {
                    return false;
                },
                onDrop: function (e) {
                    console.log('in drag stop');
                    e.dataTransfer = e.originalEvent.dataTransfer;
                    var data = e.dataTransfer.getData('text/plain');
                    data = data.split('---');
                    data[0] = +data[0];
                    var type = data[1];
                    var webixList = null;
                    if(type == 'model'){
                        webixList = __webixSelectedModelList;
                    }
                    else if(type == 'data map'){
                        webixList = __webixSelectedDataMapList;
                    }
                    // else if(type == 'data refactor'){
                    //     webixList = __webixSelectedDataRefactorList;
                    // }
                    var SADLService = webixList.getItem(webixList.getIdByIndex(data[0]));
                    CanvasJS.addServiceRole(SADLService);
                }
            };
        },

        init: function () {
            var self = this;
            webix.locale.pager = {
                first: "<<",
                last: ">>",
                next: ">",
                prev: "<"
            };

            __webixModelList = new this.initTab12('div-model-list');
            __webixDataList = new this.initTab12('div-data-list');
            this.initTab3();

            this.bindAjaxGetServicesEvent('model', function (err, type, itemData) {
                if(err){

                }
                else{
                    self.__buildTab12List(type, itemData);
                }
            });
            this.bindAjaxGetServicesEvent('data map', function (err, type, itemData) {
                if(err){

                }
                else{
                    self.__buildTab12List(type, itemData);
                }
            });
        },
        
        initTab12: function (containerID) {
            return (function () {
                var width = null;
                var height = null;
                var top = null;

                // if(containerID == 'div-model-list'){
                //     top = __getElementTop($('#div-model-list')[0]);
                    width = $('#div-model-Node .sidebar-body').width();
                    // top = __getHiddenHeight($('#div-model-Node .sidebar-header'));
                    // height = $('#div-model-Node .sidebar-body').height() - $('#div-model-Node .sidebar-header').height() - 10;
                // }
                // else if(containerID == 'div-data-list'){
                //     top = __getElementTop($('#div-data-Node .add-div')[0]) + $('#div-model-Node .add-div').height();
                //     width = $('#div-data-Node').width() -16;
                // }

                height = window.innerHeight - 163;
                webix.ui({
                    container: containerID,
                    view:"scrollview",
                    scroll: false,
                    width: width,
                    height: height,
                    body:{
                        rows:[
                            {
                                id: containerID + '-accordion',
                                view: 'accordion',
                                // width: width,
                                // height: height,
                                multi: true,
                                // width: width - 50,
                                rows: []
                            }
                        ]
                    }
                });

                return $$(containerID + '-accordion');
            })();
        },

        bindAjaxGetServicesEvent: function (type, cb) {
            var self = this;
            var formSelector = null;
            if(type == 'model'){
                formSelector = '#div-model-Node form';
            }
            else if(type == 'data map'){
                formSelector = '#div-data-Node form';
            }
            $(formSelector).validate({
                onfocusout: function (element) {
                    $(element).valid();
                },
                focusInvalid: true,
                submitHandler: function (form) {
                    var formData = __serialize(form);
                    $('#global-loading-div').show();
                    self.ajaxGetServices(type, function (err, type, itemData) {
                        if(err){
                            cb(err);
                        }
                        else{
                            cb(null,type,itemData);
                        }
                    });
                }
            });
        },

        ajaxGetServices: function (type, cb) {
            var url = null;
            if(type == 'model'){
                url = '/integration/network/getMS';
                formID = '#div-model-Node form';
            }
            else if(type == 'data map'){
                url = '/integration/network/getDS';
                formID = '#div-data-Node form';
            }

            var formData = __serialize(formID);
            $.ajax({
                url: url + '?' + $(formID).serialize(),
                type: 'GET',
                dataType: 'json'
            })
                .done(function (res) {
                    $('#global-loading-div').hide();
                    if(res.error){
                        __addNotice(__NoticeType.warning, 'Fail to get '+type+' services of \'' + formData.host + '\'!<br><pre>' + JSON.stringify(res.error,null,4) + '</pre>');
                        return cb(res.error);
                    }
                    else{
                        __addNotice(__NoticeType.notice, 'Fetch '+type+' services successed!');
                        var itemData = {
                            host: formData.host,
                            port: formData.port,
                            serviceList: (type == 'model')?res.msList:res.dsList
                        };

                        return cb(null,type, itemData);
                    }
                })
                .fail(function (error) {
                    $('#global-loading-div').hide();
                    __addNotice(__NoticeType.warning, 'Fetch '+type+' services failed!<br><pre>' + JSON.stringify(error,null,4) + '</pre>');
                    return cb(error);
                });
        },

        initTab3: function () {
            var hHeight = $('#div-model-Node h4').height();
            var paddingTop = $('#div-model-Node h4').css('padding-top');
            paddingTop = + paddingTop.replace('px','');
            var marginTop = $('#div-model-Node h4').css('margin-top');
            marginTop = + marginTop.replace('px','');

            var width = $('#div-AggreMS h').width() - 1 ;
            var height = window.innerHeight - hHeight - paddingTop*2 - marginTop*2 - 20;
            webix.ui({
                id: 'tab3',
                type: 'space',
                container: 'webix-AggreMS-list',
                view: 'scrollview',
                scroll: 'xy',
                width: width,
                height: height,
                body: {
                    id: 'services-accordion',
                    view: 'accordion',
                    width: width,
                    multi: true,
                    rows: [
                        {
                            id: 'model-services-accordion-item',
                            view: 'accordionitem',
                            header: 'Selected model services',
                            headerHeight: __HeaderHeight,
                            headerAltHeight: __HeaderHeight,
                            width: width,
                            collapsed: false,
                            body: {
                                id: 'model-services-list',
                                view: 'list',
                                autoheight: true,
                                yCount: 6,
                                select: false,
                                multiselect: false,
                                scroll: true,
                                editable: false,
                                data: [],
                                template: function (obj) {
                                    return obj.MS.ms_model.m_name;
                                }
                            }
                        },
                        {
                            id: 'data-map-services-accordion-item',
                            view: 'accordionitem',
                            header: 'Selected data map services',
                            headerHeight: __HeaderHeight,
                            headerAltHeight: __HeaderHeight,
                            width: width,
                            collapsed: false,
                            body: {
                                id: 'data-map-services-list',
                                view: 'list',
                                autoheight: true,
                                yCount: 6,
                                select: false,
                                multiselect: false,
                                scroll: 'y',
                                editable: false,
                                data: [],
                                template: function (obj) {
                                    return obj.name;
                                }
                                // on: {
                                //     'onAfterSelect': function (id) {
                                //         $(this.getNode(id)).attr('draggable',true);
                                //     }
                                // }
                            }
                        }
                        // {
                        //     id: 'data-refactor-services-accordion-item',
                        //     view: 'accordionitem',
                        //     header: 'Selected data refactor services',
                        //     headerHeight: __HeaderHeight,
                        //     headerAltHeight: __HeaderHeight,
                        //     width: width,
                        //     // height: 300,
                        //     maxHeight: 300,
                        //     collapsed: false,
                        //     body: {
                        //         id: 'data-refactor-services-list',
                        //         view: 'list',
                        //         select: true,
                        //         multiselect: false,
                        //         scroll: 'y',
                        //         editable: false,
                        //         data: [],
                        //         template: function (obj) {
                        //             return obj.name;
                        //         }
                        //     }
                        // }
                    ]
                }
            });
            __webixSelectedModelList = $$('model-services-list');
            __webixSelectedDataMapList = $$('data-map-services-list');
            __webixSelectedDataRefactorList = $$('data-refactor-services-list');
        },

        importLayoutBySolution: function (solution) {
            var self = this;
            this.init();

            var computerNodeList = [];
            var serviceList = solution.solutionCfg.serviceList;
            for(let i=0;i<serviceList.length;i++){
                var hasInserted = false;
                for(let j=0;j<computerNodeList.length;j++){
                    if(computerNodeList[j].host == serviceList[i].host && computerNodeList[j].port == serviceList[i].port){
                        hasInserted = true;
                    }
                }
                if(!hasInserted){
                    computerNodeList.push({
                        host: serviceList[i].host,
                        port: serviceList[i].port,
                        serviceType: serviceList[i].serviceType
                    });
                }
            }
            window.importNode = {
                count: computerNodeList.length,
                index: 0
            };

            for(let i=0;i<computerNodeList.length;i++){
                var serviceType = computerNodeList[i].serviceType;
                if(serviceType == 'model'){
                    $('#model-host').attr('value',computerNodeList[i].host);
                    $('#model-port').attr('value',computerNodeList[i].port);
                    computerNodeList[i].widgetType = '';
                    computerNodeList[i].submitType = 'model';
                    computerNodeList[i].serviceName = 'MS';
                }
                else if(serviceType == 'data map'){
                    $('#data-host').attr('value',computerNodeList[i].host);
                    $('#data-port').attr('value',computerNodeList[i].port);
                    computerNodeList[i].widgetType = '-data-map';
                    computerNodeList[i].submitType = 'data-map';
                    computerNodeList[i].serviceName = 'DS';
                }

                this.ajaxGetServices(serviceType, function (err,type,itemData) {
                    if(err){

                    }
                    else{
                        self.__buildTab12List(type,itemData, function () {
                            for(let j=0;j<serviceList.length;j++){
                                if(serviceList[j].host == computerNodeList[i].host && serviceList[j].port == computerNodeList[i].port){
                                    var webixTree = $$(computerNodeList[i].host + '-' + computerNodeList[i].port + computerNodeList[i].widgetType + '-tree');
                                    var itemID = webixTree.getFirstId();
                                    while(itemID){
                                        item = webixTree.getItem(itemID);
                                        if(item._id == serviceList[j][computerNodeList[i].serviceName]._id){
                                            webixTree.checkItem(itemID);
                                            break;
                                        }
                                        itemID = webixTree.getNextId(itemID);
                                    }
                                }
                            }
                            let webixBtn = $$(computerNodeList[i].host + '-' + computerNodeList[i].port + computerNodeList[i].widgetType + '-btn');
                            // $($(webixBtn.$view).find('button')).click();
                            $(webixBtn.$view).click(function (e) {
                                e.preventDefault();
                                e.stopPropagation();
                                self.__addDetailClick(computerNodeList[i].serviceType, webixTree, computerNodeList[i].host, computerNodeList[i].port);
                            });
                            $(webixBtn.$view).click();
                        });
                    }
                });
            }
        }
    };
})();